/*
 * @Author: xiaosihan 
 * @Date: 2023-08-15 22:38:03 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:47:02
 */


import { Input, Slider } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import designTemplateEditorStore from "../../designTemplateEditorStore";
import designTemplateEditor from "../../designTemplateEditorer";
import lockSVG from "./lock.svg";
import styles from "./toolRepeatSpaceContorl.module.less";
import unlockSVG from "./unlock.svg";

interface Iprops {
}

// 重复间距控制器
export default function ToolRepeatSpaceContorl() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [visible, setVisible] = useState<boolean>(designTemplateEditorStore.showRepeatSpaceContorl);
    const [repeatSpacelink, setRepeatSpacelink] = useState<boolean>(designTemplateEditorStore.repeatSpacelink);
    const [repeatSpaceX, setSepeatSpaceX] = useState<number>(designTemplateEditorStore.repeatSpaceX);
    const [repeatSpaceY, setSepeatSpaceY] = useState<number>(designTemplateEditorStore.repeatSpaceY);

    useEffect(() => autorun(() => {
        setVisible(designTemplateEditorStore.showRepeatSpaceContorl);
    }), []);

    useEffect(() => autorun(() => {
        setRepeatSpacelink(designTemplateEditorStore.repeatSpacelink);
    }), []);

    useEffect(() => autorun(() => {
        setVisible(designTemplateEditorStore.showRepeatSpaceContorl);
    }), []);

    useEffect(() => autorun(() => {
        setSepeatSpaceX(designTemplateEditorStore.repeatSpaceX);
    }), []);

    useEffect(() => autorun(() => {
        setSepeatSpaceY(designTemplateEditorStore.repeatSpaceY);
    }), []);

    useEffect(() => {

        const blur = () => {
            designTemplateEditorStore.setShowRepeatSpaceContorl(false);
        }

        document.addEventListener("mousedown", blur);

        return () => {
            document.removeEventListener("mousedown", blur);
        }
    }, []);

    return (
        <div
            onMouseDown={e => {
                e.stopPropagation();
                e.preventDefault();
            }}
            className={clsx(styles.toolRepeatSpaceContorl, visible && styles.visible)}
        >
            <div className={styles.row} >
                <span className={styles.lable} >横向</span>
                <Slider
                    className={styles.slider}
                    min={0}
                    max={500}
                    value={repeatSpaceX}
                    onChange={v => {
                        designTemplateEditor.setRepeatSpaceX(v);
                        if (repeatSpacelink) {
                            designTemplateEditor.setRepeatSpaceY(v);
                        }
                    }}
                />
                <Input
                    key={repeatSpaceX}
                    size="small"
                    className={styles.input}
                    defaultValue={repeatSpaceX}
                    onPressEnter={e => {
                        designTemplateEditor.setRepeatSpaceX(Number((e.target as HTMLInputElement).value));
                    }}
                    onBlur={e => {
                        designTemplateEditor.setRepeatSpaceX(Number((e.target as HTMLInputElement).value));
                    }}
                />
            </div>
            <div className={styles.row} >
                <img
                    className={styles.lock}
                    src={repeatSpacelink ? lockSVG : unlockSVG}
                    alt=""
                    onClick={() => {
                        designTemplateEditorStore.setRepeatSpacelink(!repeatSpacelink);
                        if (!repeatSpacelink) {
                            designTemplateEditor.setRepeatSpaceY(designTemplateEditorStore.repeatSpaceX);
                        }
                    }}
                />
            </div>
            <div className={styles.row} >
                <span className={styles.lable} >纵向</span>
                <Slider
                    className={styles.slider}
                    min={0}
                    max={500}
                    value={repeatSpaceY}
                    onChange={v => {
                        if (repeatSpacelink) {
                            designTemplateEditor.setRepeatSpaceX(v);
                        }
                        designTemplateEditor.setRepeatSpaceY(v);
                    }}
                />
                <Input
                    key={repeatSpaceY}
                    size="small"
                    className={styles.input}
                    defaultValue={repeatSpaceY}
                    onPressEnter={e => {
                        designTemplateEditor.setRepeatSpaceY(Number((e.target as HTMLInputElement).value));
                    }}
                    onBlur={e => {
                        designTemplateEditor.setRepeatSpaceY(Number((e.target as HTMLInputElement).value));
                    }}
                />
            </div>
        </div>
    );

}